<template>
  <div class="bg">
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TooltipComponent
} from 'echarts/components';
import 'echarts/extension/bmap/bmap';
import { LinesChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { dataCenterGetMap } from "@/api/front-home";
import china from "../china.js";

echarts.use([ 
  LinesChart, 
  TitleComponent, 
  TooltipComponent, 
  CanvasRenderer
]);

export default {
  name: "MapChartData",
  props: {
  },
  components: {

  },
  data() {
    return {
      linesData: [],
      scatterData: [],
    }
  },
  computed: {

  },
  watch: {
    
  },
  methods: {
    getData() {
      dataCenterGetMap().then(res => {
        var temp = {
          companyAddress: '东莞',
          companyLng: '113.789745',
          companyLat: '23.034095',
          receiveAddress: '青海',
          receiveLng: '96.005',
          receiveLat: '35.865888',
          num: 5
        }
        var temp1 = {
          companyAddress: '东莞',
          companyLng: '113.789745',
          companyLat: '23.034095',
          receiveAddress: '宁夏',
          receiveLng: '106.068896',
          receiveLat: '37.512792',
          num: 5
        }

        var temp2 = {
          companyAddress: '东莞',
          companyLng: '113.789745',
          companyLat: '23.034095',
          receiveAddress: '甘肃',
          receiveLng: '103.839949',
          receiveLat: '36.065933',
          num: 5
        }
        res.push(temp)
        res.push(temp1)
        res.push(temp2)
        this.initData(res)
        this.updateUI()
      })
      .catch((err) => {
        
      })
    },
    initData(dataList) {
      let hStep = 300 / (dataList.length - 1);
      for (var i = 0; i < dataList.length; i++) {
        var dataItem = dataList[i];
        var fromCoord = [dataItem.companyLng, dataItem.companyLat];
        var toCoord = [dataItem.receiveLng, dataItem.receiveLat];

        var name = dataItem.companyAddress + '→' + dataItem.receiveAddress
        // let color = echarts.color.modifyHSL('#5A94DF', Math.round(hStep * i))
        let color = 'rgba(255, 235, 59, 0.4)'
        if (fromCoord && toCoord) {
          this.linesData.push({
            fromName: dataItem.companyAddress,
            toName: dataItem.receiveAddress,
            name: name,
            coords: [fromCoord, toCoord],
            lineStyle: { //给每条线都不同的样式
              color: color
            }
          });

          this.scatterData.push({ 
            name: dataItem.receiveAddress,
            value: toCoord.concat(dataItem.num),
            itemStyle: {
              color: color
            }
          })
        }
      }
    },
    updateUI() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      
      var option;

      var planePath =
      'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

      option = {
        tooltip: {
          trigger: 'item',
        },
        geo: {
          map: "china",
          roam: false,// 一定要关闭拖拽
          zoom: 1.20,
          center: [105, 36], // 调整地图位置
          label: {
            normal: {
              show:  true, //关闭省份名展示
              fontSize: "16",
              color: "rgba(255,255,255,0.3)"
            },
            emphasis: {
              // show: false,
              color:'#FFFFFF',
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#4b60ff60",
              borderColor: "#354fe5",
              borderWidth: 1, //设置外层边框
              // shadowBlur: 1,
              // shadowOffsetY: 2,
              // shadowOffsetX: 0,
              // shadowColor: "#00000011"
            },
            emphasis: {
              areaColor: "#4b60ff",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
              color: "#ffffff",
            }
          },
        },
        // bmap: {
        //   // center: [114.311754,30.598604],
        //   zoom: 1,
        //   roam: true,
        //   mapStyleV2: {
        //     styleId: '361dba760342656b29da940bcded37cf'
        //   },
        // },
        series: [
        {
            name:'',
            type: 'lines',
            zlevel: 1,
            coordinateSystem: 'geo',
            data: this.linesData,
            effect: {
              symbol: 'arrow',
              show: true,
              smooth: true,
              constantSpeed: 8,//配置特效图形的移动动画
              period: 10,//特效动画的时间
              trailLength: 0,//特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
              // color: '#fff',
              symbolSize: 4,
            },
            lineStyle: {
              // color: 'rgb(200, 35, 45)',
              opacity: 0.5,
              width: 1,
              curveness: 0.3
            },
            progressiveThreshold: 5000,
            progressive: 500,
            tooltip: {
              backgroundColor: 'rgba(0,0,0,0.3)',
              textStyle: {
                color: '#fff'
              },
              formatter: function (params) {
                return params.name
              } 
            },
          },
          {
            name: '',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              brushType: 'stroke'
            },
            // symbolSize: 8,
            symbolSize: function (params) {
              // console.log(234, params)
              return params[2];
            },
            // label: {
            //   show: true,
            //   position: 'right',
            //   formatter: '{b}'
            // },
            colorBy: 'data',
            data: this.scatterData,
            tooltip: {
              backgroundColor: 'rgba(0,0,0,0.3)',
              textStyle: {
                color: '#fff'
              },
              formatter: function (params) {
                return params.name
              } 
            },
          },
          // {
          //   type: 'lines',
          //   coordinateSystem: 'bmap',
          //   zlevel: 2,
          //   symbol: ['none', 'arrow'],
          //   symbolSize: 10,
          //   effect: {
          //     show: true,
          //     period: 6,
          //     trailLength: 0,
          //     symbol: planePath,
          //     symbolSize: 15
          //   },
          //   lineStyle: {
          //     // color: '#ffa022',
          //     width: 1,
          //     opacity: 0.6,
          //     curveness: 0.2
          //   },
          //   data: busLines
          // },

        ]
      }

      myChart.setOption(option);
    }
  },
  created() {
    
  },
  mounted() {
    // echarts.registerMap('china', china)
    this.getData()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>

  .bg {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  #main {
    position: relative;
    width: 100%;
    height: 100%;
  }

  ::v-deep .anchorBL {
    display: none !important;;
  }
</style>